<template>
    <v-app>
        <center>
            <strong style="margin-top: 10px; font-size: xx-large;color: dodgerblue">搜 索</strong>
            <v-text-field
                style="width: 80%; margin-top: 10px"
                clearable
                prepend-inner-icon="mdi-magnify"
                @keyup.enter.native="doSearch"
                label="输入关键词（匹配标题和简介）"
                solo
                v-model="wd"
            ></v-text-field>
            <v-divider></v-divider>
            <br/>
            <v-row style="width: 90%">
                <v-col v-for="i in list" cols="12" sm="6" :key="i.id">
                    <v-card
                            class="mx-auto"
                            width="100%"
                    >
                        <v-img
                                style="cursor: pointer"
                                :src="i.img"
                                @click="$router.push('/article/'+i.id)"
                        ></v-img>

                        <v-card-title>
                            <router-link style="text-decoration: none; color: black" :to="'/article/'+i.id">{{i.title}}</router-link>
                        </v-card-title>

                        <v-card-subtitle>
                            {{i.des}}
                        </v-card-subtitle>

                        <v-card-text>
                            {{i.theTime}}
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </center>
        <br/>
    </v-app>
</template>

<script>
    export default {
        name: "Search",
        methods:{
            doSearch(){
                const t = this;
                if (t.wd.match(/^\s*$/)){
                    return;
                }
                this.searchAtc(t.wd).then(function (resp) {
                    t.list = resp.data;
                })
            }
        },
        data: () => ({
            wd: '',
            list: [],
        }),
        created() {
            if (this.$route.query.wd!=null) {
                this.wd = this.$route.query.wd;
                this.doSearch();
            }
        },
        watch:{
            wd() {
                if (this.wd.match(/^\s*$/)){
                    return;
                }
                this.$router.push({
                    query: {
                        wd: this.wd
                    },
                });
            },
            '$route.query.wd': function () {
                this.doSearch();
            }
        }
    }
</script>

<style scoped>

</style>